<template>
    <div class="preview-not-supported">
        <el-icon class="file-icon">
            <Document />
        </el-icon>
        <p>该文件类型不支持在线预览</p>
        <p class="file-info">{{ file.name }} ({{ formatFileSize(file.size) }})</p>
        <el-button type="primary" @click="$emit('download')">下载文件</el-button>
    </div>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue'

defineProps({
    file: {
        type: Object,
        required: true
    }
})

defineEmits(['download'])

const formatFileSize = (size) => {
    if (size === undefined || size === null || size === 0) return '0 Bytes'
    if (isNaN(size)) return '未知大小'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(size) / Math.log(k))
    return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>

<style scoped>
.preview-not-supported {
    text-align: center;
    padding: 40px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.file-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: #c0c4cc;
}

.preview-not-supported p {
    margin: 10px 0;
}

.file-info {
    font-size: 14px;
    color: #909399;
    margin: 10px 0;
}
</style>